<div class="data-div" xmlns:th="http://www.w3.org/1999/xhtml">
    <div class="widget-header bordered-bottom bordered-themeprimary">
        <i class="widget-icon fa fa-tasks themeprimary"></i>
        <span class="widget-caption themeprimary">数据列表</span>
        <form role="form" onsubmit="return false;" id="form_data_table_serial_commission_list_1">
            <div class="widget-buttons">
                &nbsp;获佣用户ID：<input type="text" name="commissionUid"
                                    style="width:120px;height:25px;margin-right:10px;padding: 3px;">
                获佣用户(电话)：<input type="text" name="commissionUserName"
                                style="width:120px;height:25px;margin-right:10px;padding: 3px;">
            </div>
            <div class="widget-buttons">
                <div id="reservation"
                     style="background: #fff; cursor: pointer; border: 1px solid #ccc;padding: 5px 10px;line-height:16px;">
                    <i class="glyphicon glyphicon-calendar fa fa-calendar blue"></i>
                    <span th:text="${timeFrame}"></span> <b class="caret"></b>
                </div>
            </div>
            <div class="widget-buttons">
                <button href="javascript:;" class="btn btn-blue btn-xs search" data-title="查询" data-form="true"
                        onclick="">查询
                </button>
            </div>
            <input id="-id-datetime_time" type="hidden" name="datetime_time" th:value="${timeFrame}" value=""/>
        </form>
    </div>

    <div class="widget no-header ">
        <div class="widget-body">
            <table class="table table-condensed table-bordered table-hover " id="data_table_serial_commission_list_1">
            </table>

        </div>
    </div>
    <!-- END SAMPLE TABLE PORTLET-->
</div>

<script type="text/javascript">

    $(document).ready(function () {
        var cb = function (start, end, label) {
            $('#reservation span').html(start.format('YYYY-MM-DD') + '至' + end.format('YYYY-MM-DD'));
            $('#-id-datetime_time').val(start.format('YYYY-MM-DD') + '至' + end.format('YYYY-MM-DD'));
            // loadChartData();
        };

        var optionSet1 = {
//	         startDate: moment().subtract(29, 'days'),
            startDate: moment(),
            endDate: moment(),
//	         minDate: '',
            maxDate: moment().subtract(0, 'days'),
            dateLimit: {days: 60},
            showDropdowns: true,
            showWeekNumbers: true,
            timePicker: false,
            ranges: {
                '今天': [moment(), moment()],
                '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                '最近 7 天': [moment().subtract(6, 'days'), moment()],
                '最近 30 天': [moment().subtract(29, 'days'), moment()],
                '本月 ': [moment().startOf('month'), moment().endOf('month')],
                '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            },
            opens: 'left',
            buttonClasses: ['btn btn-green'],
            applyClass: 'btn-sm btn-primary',
            cancelClass: 'btn-sm',
            format: 'YY/MM/DD',
            separator: '至',
            locale: {
                applyLabel: '确定',
                cancelLabel: '取消',
                fromLabel: '开始',
                toLabel: '结束',
                customRangeLabel: '自定义',
                daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
                monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                firstDay: 1
            }
        };
        $('#reservation').daterangepicker(optionSet1, cb);

        //look-up 查询条件 会员
        Select2Ex.handleForm4select2({target: $("#form_data_table_serial_commission_list_1")});

        TableAjax.init('data_table_serial_commission_list_1', {
            sAjaxSource: "yqf_commission_serial/list",
            uxDataTitle: "null",
            uxCheckable: false,
            uxCloseScroll: true,
            uxDrapable: false,
            aoColumns: [
                {sTitle: '商户名称', mData: "merchantName"},
                {
                    sTitle: '订单金额', mData: "orderAmount", mRender: function (all, d, all) {
                        return (all.orderAmount / 100).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
                    }
                },
                {
                    sTitle: '退款金额', mData: "refundAmount", mRender: function (all, d, all) {
                        return (all.refundAmount / 100).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
                    }
                },
                {
                    sTitle: '顾客实际支付', mData: "income", mRender: function (all, d, all) {
                        return (all.actualAmount / 100).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
                    }
                },
                {
                    sTitle: '参与分佣金额', mData: "joinedAmount", mRender: function (all, d, all) {
                        return (all.joinedAmount / 100).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
                    }
                },
                {sTitle: '分佣比例', mData: "commissionRate"},
                {sTitle: '获佣用户ID', mData: "commissionUid"},
                {sTitle: '获佣用户', mData: "commissionUserName"},
                {
                    sTitle: '获得佣金', mData: "commission", mRender: function (all, d, all) {
                        return (all.commission / 100).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
                    }
                },
                {sTitle: '流水日期', mData: "serialDate"}
            ]

        });

    });

</script>